<template>
  <div class="left-item-num">
    <img :src="item.url" alt="#">
    <div class="left-item-num-right">
      <div class="num">{{ item.num }}</div>
      <div class="title">{{ item.title }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  }
  // data() {
  //   return {
  //     img: require('@/assets/images/fullscreen/xmgs0.png')
  //   };
  // }
};
</script>

<style lang="scss" scoped>
$vw: 1920px;
@function px2vw($px) {
  @return $px / $vw * 100vw;
}
.left-item-num{
  display: flex;
  img{
    height: 100%;
  }
  .left-item-num-right{
    height: 100%;
    .num{
      height: 60%;
      font-size: px2vw(24px);
      color: #f6bd16;
      display: flex;
      align-items: center;
    }
    .title{
      display: flex;
      align-items: center;
      color: #1fd2ff;
      height: 40%;
      font-size: px2vw(14px);
    }
  }

}
</style>
